<template>
  <div class="lvcai-login bg-white">
    <div class="container lvcai-login-box">
      <div class="clearfix mgb-30">
        <div class="fl lvcai-login-box-left">
            <div class="login-text">
                <p class="big"><span class="bigger">绿采！</span>欢迎您的选择</p>
                <p class="normal">我们热爱蓝天，我们热爱白云，我们更加热爱我们这个大家庭-地球</p>
                <p class="normal">环保，从你我做起。我们竭诚为您提供优质的环保材料，为您的生活提供那一抹清新健康的绿色。</p>
                <p class="blue">我们在绿采等您！</p>
            </div>
        </div>
        <div class="login-box fr clearfix">
          <ul class="clearfix">
            <li @click="cur=1" :class="{active:cur==1}" class="fr">验证码登录</li>
            <li @click="cur=0" :class="{active:cur==0}" class="fl">密码登陆</li>
          </ul>
          <div v-show="cur==1" class="login-person-form">
            <el-form :model="loginCodeForm" ref="loginCodeForm" :rules="rules" label-width="0" class="loginForm">
              <!-- <el-form-item prop="radio" class="login-choice">
                我是
                <el-radio label="1" v-model="radio" class="mgl-30">个人</el-radio>
                <el-radio label="2" v-model="radio">企业</el-radio>
              </el-form-item> -->
              <el-form-item label="我是" prop="percom" class="percom-label">
                <el-radio-group v-model="loginCodeForm.percom">
                <el-radio label="个人"></el-radio>
                <el-radio label="企业"></el-radio>
                </el-radio-group>
            </el-form-item>
              <el-form-item prop="mobile" class="phone-input">
                  <el-input v-model="loginCodeForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="code" class="code">
                <el-input v-model="loginCodeForm.code" placeholder="请输入验证码"></el-input>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                </el-button>
              </el-form-item>
              <el-form-item class="login-person-forget">
                <router-link to="Password">忘记密码？</router-link>
              </el-form-item>
              <el-form-item class="login-person-btn">
                <el-button type="primary" @click="submitCodeForm('loginCodeForm')">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="cur==0" class="login-com-form">
            <el-form :model="loginPasswordForm" ref="loginPasswordForm" :rules="rulespassword" label-width="0" class="loginForm">
              <el-form-item prop="mobile">
                  <el-input v-model="loginPasswordForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                  <el-input v-model="loginPasswordForm.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item class="login-com-forget">
                <router-link to="Password">忘记密码？</router-link>
              </el-form-item>
              <el-form-item class="login-person-btn">
                <el-button type="primary" @click="submitPasswordForm('loginPasswordForm')">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import VDistpicker from "v-distpicker";
export default {
  name:'Login',
  data(){
    const validatePass = (rule,value,callback)=>{
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error('请输入正确的手机号'));
      }
    }
    return{
      // activeName: 'first'
        cur:0 ,//默认选中第一个tab
        sendcodeobj:{
          mobile:''
        },
        sendcodeNum:'',
        loginCodeForm: {
            mobile: '',
            code: '',
            percom:''
        },
        rules: {
            code: [{required: true,message: "请输入验证码",trigger: "blur"}],
            percom: [{required: true,message: "请选择类型",trigger: "blur"}],
            mobile:[
            {required: true,message: "请输入手机号码",trigger: "blur"},
            {validator:validatePass}
            ]
        },
        loginPasswordForm:{
            mobile:'',
            password:''
        },
        rulespassword: {
            password: [{required: true,message: "请输入密码",trigger: "blur"}],
            mobile:[
            {required: true,message: "请输入手机号码",trigger: "blur"},
            {validator:validatePass}
            ]
        },
        disabled: false,
        time: 0,
        btntxt: "重新发送",
        // radio: '1',
        comType:''
    }
  },
  methods:{
    //手机验证发送验证码
            sendcode() {
                const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                if (this.loginCodeForm.mobile == '') {
                    this.$message({
                        message:'手机号不能为空',
                        center: true
                    })
                    return
                }
                if (!reg.test(this.loginCodeForm.mobile)) {
                    this.$message({
                        message:'请输入正确的手机号',
                        center:true
                    })
                    return
                } else {
                    console.log(this.loginCodeForm.mobile);
                    axios.post('/tool/sendCode', {
                      mobile:this.loginCodeForm.mobile
                    }).then(res=>{
                      res = res.data
                      if(res.code == 200) {
                        this.$message(res.message);
                        this.sendcodeNum = res.response.code; 
                      } else{
                        this.$message(res.message);
                      }
                    })
                    .catch(function (error) {
                      console.log(error);
                    });
                    // this.$message({
                    //     message: '发送成功',
                    //     type: 'success',
                    //     center:true
                    // });
                    this.time = 60;
                    this.disabled = true;
                    this.timer();
                }
            },
            //60S倒计时
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt = this.time + "s后重新获取";
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    this.btntxt = "获取验证码";
                    this.disabled = false;
                }
            },
    // 提交表单
    submitCodeForm(loginCodeForm){
      console.log(this.loginCodeForm)
      this.$refs[loginCodeForm].validate((valid)=>{
        if(valid){
          axios.post('/tool/checkCode', {
            mobile: this.registerPersonForm.mobile,
            code:this.registerPersonForm.code
          }).then(res=>{
            res = res.data
            if(res.code == 200){
              axios.post('/auth/login', {
                mobile: this.loginCodeForm.mobile,
                code:this.loginCodeForm.code,
                percom:this.loginCodeForm.percom
              }).then(res=>{
                res = res.data
                if(res.code == 200) {
                  that.$message(res.message);
                } else{
                  that.$message(res.message);
                }
              })
              .catch(function (error) {
                console.log(error);
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        }
      })
    },
    // 提交表单
    submitPasswordForm(loginPasswordForm){
      console.log(this.loginPasswordForm)
      this.$refs[loginPasswordForm].validate((valid)=>{
        if(valid){
          axios.post('/auth/login', {
            mobile: this.loginPasswordForm.mobile,
            password:this.loginPasswordForm.password
          }).then(res=>{
            res = res.data
            if(res.code == 200) {
              that.$message(res.message);
              sessionStorage.setItem('logintoken', 'res.response.token'); 
              sessionStorage.setItem('islogin', 'true'); 
            } else{
              that.$message(res.message);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        }
      })
    },
  },
  created(){
    this.$emit('public_header', false);
    this.$emit('public_headerhover', true);
    this.$emit('public_footer', true);
  }
}
</script>

<style>
 @import '../../../static/style/login';
</style>

